<script>
export default {
  name: 'App',
  methods:{
    goHome(){
      //编程式导航/路由
      this.$router.push('/') //传path的值
    },
    goNews(){
      //编程式导航/路由
      //this.$router.push({path:'/news'}) //传path属性
      this.$router.replace({path:'/news'})
    },
    goAbout(){
      //this.$router.push('/about')
      //编程的命名路由
      this.$router.push({name:'about'})//传的是路由的名称
    },
    back(){
      //显示上一个页面的内容
      this.$router.go(-1)
    },
    logout(){
      //在本地存储中清除用户信息
      //清除指定信息
      localStorage.removeItem('loginStatus')
      //清除所有
      // localStorage.clear();
      this.$router.push('/login')
    }
  }
}
</script>

<template>
  <div>

    <ul class="nav">
      <li><router-link to="/" replace>首页</router-link></li>
      <li><router-link to="/news">新闻</router-link></li>
      <li><router-link to="/about">关于我们</router-link></li>
      <li><router-link to="/login">登录</router-link></li>
      <li><router-link to="/remark">评论</router-link></li>
      <li><button @click="logout">退出</button></li>
    </ul>
    <!--
    <h5>命名路由</h5>
    <ul class="nav">
      <li><router-link :to="{name:'home'}">首页</router-link></li>
      <li><router-link :to="{name:'news'}">新闻</router-link></li>
      <li><router-link :to="{name:'about'}">关于我们</router-link></li>
      <li><router-link :to="{name:'login'}">登录</router-link></li>
    </ul>-->
    <h5>编程导航</h5>
    <ul class="nav">
<!-- javascript:void(0)屏蔽href属性生效     -->
      <li><a href="javascript:void(0)" @click="goHome">首页</a></li>
      <li><button @click="goNews">新闻</button></li>
      <li @click="goAbout">关于我们</li>
      <li><router-link :to="{path:'/login'}">登录</router-link></li>
      <li><button @click="this.$router.go(-1)">返回1</button></li>
      <li><button @click="back">返回2</button></li>

    </ul>
  </div>
<!-- 显示组件的地方 -->
  <RouterView/>
</template>

<style scoped>
  .nav{
    list-style: none;
    width: 100%;
    height: 60px;

  }
  .nav li{
    float: left;
    width: 120px;
  }
</style>
